<template>
	<view class="edit_login_password_warp">
		<Header leftPathType="navigateTo" leftPath="/pages/safety_center/safety_center" :title="$t('mine.pwd.title')"/>
		<view class="edit_login_password_content_warp">
			<view class="form_content_item">
				<view class="form_content_item_title">{{$t('mine.pwd.old')}}</view>
				<up-input
				    :placeholder="$t('mine.pwd.old.placeholder')"
				    border="surround"
				    v-model="form.oldPassword"
					:customStyle="inputCss"
					:type="password2IsShow ?'text':'password'"
				  >
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="oldPasswordIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="oldPasswordIsShow=false;"></up-image>
						<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="oldPasswordIsShow=true;"></up-image>
					</template>
				  </up-input>
			</view>
			<view class="form_content_item">
				<view class="form_content_item_title">{{$t('mine.pwd.new')}}</view>
				<up-input
				    :placeholder="$t('mine.pwd.new.placeholder')"
				    border="surround"
				    v-model="form.newPassword"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="form_content_item">
				<view class="form_content_item_title">{{$t('mine.pwd.new')}}</view>
				<up-input
				    :placeholder="$t('mine.pwd.new.placeholder')"
				    border="surround"
				    v-model="form.newPassword2"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			
			<view class="but_comm_warp" @click="confirmFun">
				{{$('common.confirm')}}
			</view>
			<view class="forget_password" @click="forgetPasswordOk">{{$t('common.forget.old.password')}}</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import CryptoJS from 'crypto-js';
	import { updatePassword } from '@/api/auth.js';
	
	export default {
		components:{Header},
		data() {
			return {
				form:{
					oldPassword:null,
					newPassword:null,
					newPassword2:null,
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
			};
		},
		methods: {
			/**
			 * 通过旧密码去修改密码
			 */
			async confirmFun(){
				const form = this.form;
				if(!form.oldPassword){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.pwd.old.placeholder'),
					});
					return;
				}
				if(!form.newPassword){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.pwd.new.placeholder'),
					});
					return;
				}
				if(!form.newPassword2){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.pwd.new2.placeholder'),
					});
					return;
				}
				if(form.newPassword.trim() !== form.newPassword2.trim()){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this,
					});
					return;
				}
				const params={
					oldPassword:CryptoJS.MD5(form.oldPassword).toString(),
					newPassword:CryptoJS.MD5(form.newPassword).toString(),
				}
				const response = await updatePassword(params);
				if(response && response.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: response.msg,
					});
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/safety_center/safety_center'
						})
					},1500)
				}
			},
			/**
			 * 旧密码忘记了，需要去找回密码，在进行修改
			 */
			forgetPasswordOk(){
				uni.redirectTo({
					url: '/pages/reset_password/reset_password?back=editLogin'
				})
			}
		}
	}
</script>

<style lang="scss">
.edit_login_password_warp{
	height: calc(100vh - 0rpx);
	.edit_login_password_content_warp{
		padding: 30rpx;
	}
	.but_comm_warp{
		margin-top: 100rpx;
	}
	.forget_password{
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: $app-policy-color;
		margin-top: 50rpx;
	}
}
</style>
